import React from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Dropdown, Space } from 'antd';
import { GlobalOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';

const LanguageSwitcher: React.FC = () => {
    const { i18n, t } = useTranslation();

    const handleLanguageChange = (language: string) => {
        i18n.changeLanguage(language);
    };

    const items: MenuProps['items'] = [
        {
            key: 'zh-CN',
            label: (
                <span onClick={() => handleLanguageChange('zh-CN')}>
                    {t('common.chinese')}
                </span>
            ),
        },
        {
            key: 'en-US',
            label: (
                <span onClick={() => handleLanguageChange('en-US')}>
                    {t('common.english')}
                </span>
            ),
        },
    ];

    const getCurrentLanguageFlag = () => {
        // return i18n.language === 'zh-CN' ? '🇨🇳' : '🇺🇸';
        return i18n.language === 'zh-CN' ? '🇨🇳' : '🇺🇸';
    };

    const getCurrentLanguageName = () => {
        return i18n.language === 'zh-CN' ? t('common.chinese') : t('common.english');
    };

    return (
        <Dropdown menu={{ items }} placement="bottomRight">
            <Button
                type="text"
                icon={<GlobalOutlined />}
                style={{
                    color: '#666',
                    border: 'none',
                    background: 'transparent',
                    display: 'flex',
                    alignItems: 'center',
                    gap: '4px'
                }}
            >
                <span>{getCurrentLanguageFlag()}</span>
                <span>{getCurrentLanguageName()}</span>
            </Button>
        </Dropdown>
    );
};

export default LanguageSwitcher;

